<template>
  <div class="search">
    <!-- // $router.back()类似浏览器后退可以返回到上次页面 -->
    <van-nav-bar
      title="搜索"
      left-arrow
      @click-left="$router.back()"
    />
    <van-search
      v-model.trim="keyword"
      show-action
      shape="round"
      placeholder="请输入搜索关键词"
      @input="hInputThrottle"
    >
      <template #action>
        <div @click="hClickSearch">搜索</div>
      </template>
    </van-search>
    <!-- 联想建议模块 -->
    <!-- 如果用户当前在输入框输入内容则历史记录不显示 -->
    <van-cell-group v-if="suggetions.length">
      <van-cell
        v-for="suggetion,index in reSuggetions"
        :key="index"
        @click="hClickRecommend(index)"
      >
        <div v-html="suggetion"></div>
      </van-cell>
    </van-cell-group>
    <!-- 历史记录模块 -->
    <van-cell-group v-else>
      <van-cell title="历史记录" />
      <van-cell
        v-for="history,idx in historySearch"
        :key="idx"
        :title="history"
        @click="hClickResult(history)"
      >
        <template #right-icon>
          <van-icon
            name="close"
            class="close"
            @click.stop="hDelHistory(idx)"
          />
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import { getSuggetion } from '@/api/search.js'
import { setHistorySearch, getHistorySearch } from '@/untils/history.js'
import { inputThrottle } from '@/untils/throttle.js'
export default {
  data () {
    return {
      keyword: '', // 储存用户输入的信息
      suggetions: [], // 联想建议数据储存
      historySearch: getHistorySearch() || [] // 通过本地获取的历史记录信息，如果本地没有这个属性，则获取的是null，在调用数组的unshift时会报错
    }
  },
  computed: {
    // 通过计算属性对已有数据处理得到需要的关键字标红数据
    reSuggetions () {
      const reg = new RegExp(this.keyword, 'gi') // 使用正则，参数一为用户输入的数据字符串 参数二：修饰符，g代表全局替换，i代表忽略大小写
      return this.suggetions.map(item => item.replace(reg, val => `<span style="color:red">${val}</span>`))
    }
  },
  methods: {
    hInputThrottle: inputThrottle(function () {
      // console.log(this)
      this.hGetSuggetion()
    }, 500),
    async hGetSuggetion () {
      // console.log(this.keyword)
      try {
        // 当用户输入信息内容为空时，阻断请求发送
        if (!this.keyword) {
          this.suggetions = []
          return
        }
        // 发送联想建议获取请求
        const res = await getSuggetion(this.keyword)
        this.suggetions = res.data.data.options
        // console.log(this.suggetions)
        // console.log(this.reSuggetions)
      } catch (err) {
        console.log(err)
      }
    },
    // 点击搜索保存历史记录
    hClickSearch () {
      // 如果输入框内容为空则不执行如下代码
      if (!this.keyword) return
      // 点击搜索时跳转至搜索记录页面
      this.$router.push('/result?keyword=' + this.keyword)
      // 调用封装的添加方式
      this.addHistorySuggetions(this.keyword)
    },
    hClickResult (history) {
      // 点击历史搜索记录跳转至搜索结果页
      this.$router.push('/result?keyword=' + history)
    },
    // 点击联想建议保存历史记录
    hClickRecommend (idx) {
      // 由于页面铺设数据是依赖suggetion进行的加工，附带样式，所以通过索引来取原数据
      this.addHistorySuggetions(this.suggetions[idx])
      // 点击联想建议跳转搜索结果页
      this.$router.push('/result?keyword=' + this.suggetions[idx])
    },
    // 添加历史记录
    addHistorySuggetions (keyword) {
      // 把用户每次最新的搜索数据放置最上面
      this.historySearch.unshift(keyword)
      // console.log(this.historySearch)
      // 调用本地保存方法，进行历史记录持久化保存
      setHistorySearch(this.historySearch)
    },
    // 删除历史搜索记录
    hDelHistory (idx) {
      this.historySearch.splice(idx, 1)
      setHistorySearch(this.historySearch)
    }

  }
}
</script>

<style scoped>
/deep/.van-nav-bar .van-icon {
  color: #fff;
}
</style>
